<template>

  <div class="mod-demo-echarts">
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

    <div id="MapBox" class="Map-box" style="height: 1000px;width:1000px"></div>

  </div>

</template>


<!--存在图片加载不出来的问题，这是由于请求后台的工厂地图加载过慢，渲染落后的结果-->
<script>
import * as echarts from 'echarts/core'
// import svg from 'WorkShop.svg'
import {
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components'
import { MapChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer
])
export default {
  data () {
    return {
      MapBox: null,
      dataList: [
        {name: 'SvgjsPath1287', value: 15},
        {name: 'SvgjsPath1293', value: 30},
        {name: 'SvgjsPath1299', value: 55},
        {name: 'SvgjsPath1305', value: 68},
        {name: 'SvgjsPath1311', value: 29},
        {name: 'SvgjsPath1317', value: 77},
        {name: 'SvgjsPath1323', value: 88},
        {name: 'SvgjsPath1329', value: 11},
        {name: 'SvgjsPath1335', value: 22}
      ],
      svg: null
    }
  },
  activated () {
    this.getDataList()
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.MapBox) {
      this.MapBox.resize()
    }
  },
  methods: {
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/WorkDemo2.svg'),
        method: 'get'
      }).then(({data}) => {
        if (data && data) {
          this.svg = data
          echarts.registerMap('WorkShop', {svg: this.svg})
          var option = {
            tooltip: {},
            visualMap: {
              left: 'center',
              bottom: '10%',
              min: 0,
              max: 100,
              orient: 'horizontal',
              text: ['', '忙碌程度'],
              realtime: true,
              calculable: true,
              inRange: {
                color: ['#dbac00', '#db6e00', '#cf0000']
              }
            },
            series: [
              {
                name: 'WorkShop',
                type: 'map',
                map: 'WorkShop',
                roam: true,
                emphasis: {
                  label: {
                    show: false
                  }
                },
                selectedMode: false,
                data: this.dataList
              }
            ]
          }
          this.MapBox = echarts.init(document.getElementById('MapBox'))
          this.MapBox.setOption(option)
          window.addEventListener('resize', () => {
            this.MapBox.resize()
          })
        }
      })
    }

  }
}
</script>

<style scoped>
</style>
